<template>
  <div id="options">
    <top-bar :title="title"></top-bar>
    <div class="account">
      <md-field>
        <md-field-item name="item1" title="账户安全" @click="AccountSecurity">
          <span class="quicon" v-show="IsAccountSecurity"></span>
          <span slot="right" class="quiconimg">
            <img src="@/assets/imgs/arrow_right.png" />
          </span>
        </md-field-item>
      </md-field>
      <p class="urgent">
        <md-field>
          <md-field-item name="item2" title="紧急联系人" arrow="arrow-right" solid @click="EmergencyContact"></md-field-item>
        </md-field>
      </p>
    </div>
    <div class="options_name">
      <md-field>
        <md-field-item name="item3" title="法律条款与平台规则" arrow="arrow-right" solid @click="LegalRules"></md-field-item>
        <md-field-item name="item5" title="关于平安到家" arrow="arrow-right" solid @click="AboutUs"></md-field-item>
      </md-field>
    </div>
    <div class="options_name" v-if="false">
      <md-field>
        <md-field-item name="item3" title="乘客须知" arrow="arrow-right" solid @click="PassengerNotes"></md-field-item>
        <md-field-item name="item4" title="用户协议" arrow="arrow-right" solid @click="UserProtocol"></md-field-item>
        <md-field-item name="item5" title="关于我们" arrow="arrow-right" solid @click="AboutUs"></md-field-item>
      </md-field>
    </div>
    <div class="options_name" v-if="false">
      <md-field>
        <md-field-item name="item6" title="检测更新" arrow="arrow-right" solid></md-field-item>
        <md-field-item name="item7" title="清除缓存" arrow="arrow-right" solid></md-field-item>
        <md-field-item name="item8" title="意见反馈" arrow="arrow-right" solid></md-field-item>
      </md-field>
    </div>
    <p class="outlogin" @click="outlogin">退出登录</p>
  </div>
</template>

<script>
import { Tabs, Icon, Field, FieldItem, Dialog } from 'mand-mobile';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import http from '@/common/http';
import TopBar from '@/components/TopBar';
import Utils from '@/common/pakjUtils';
import Loading from '@/components/loading';
import WxUtils from '@/common/weixinUtils';
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem
  },
  data() {
    return {
      title: '设置',
      tk: '',
      openId: '',
      IsAccountSecurity: false
    };
  },
  mounted() {
    Loading.show();
    http.post('/pakj/passenger/getUserInfo').then(res => {
      Loading.hide();
      if (res.data.code === '000000') {
        if (res.data.data.is_identity === '1') {
          this.IsAccountSecurity = false;
        } else {
          this.IsAccountSecurity = true;
        }
      }
    });
  },
  methods: {
    AccountSecurity() {
      this.$router.push({
        name: 'AccountSecurity'
      });
    },
    EmergencyContact() {
      this.$router.push({
        name: 'EmergencyContact'
      });
    },
    PassengerNotes() {
      this.$router.push({
        name: 'PassengerNotes'
      });
    },
    AboutUs() {
      this.$router.push({
        name: 'AboutUs'
      });
    },
    UserProtocol() {
      this.$router.push({
        name: 'UserAgreement'
      });
    },
    LegalRules() {
      this.$router.push({
        name: 'LegalRules'
      });
    },
    // 退出
    outlogin() {
      Dialog.confirm({
        title: '提示',
        content: '是否确认退出',
        confirmText: '确认',
        onConfirm: () => {
          this.confirmOutlogin();
        }
      });
    },
    confirmOutlogin() {
      let params = {
        tk: this.getToken,
        openId: this.getOpenId
      };
      Loading.show();
      http
        .post('pakj/passenger/loginOut', params)
        .then(res => {
          Loading.hide();
          if (res.data.code === '000000') {
            Dialog.alert({
              title: '提示',
              content: res.data.msg,
              confirmText: '确定',
              onConfirm: () => {
                if (Utils.getCurrentEnv() === 'wx') {
                  // 微信
                  this.weixinLogout();
                } else if (Utils.getCurrentEnv() === 'mini') {
                  // 小程序
                  localStorage.clear();
                  sessionStorage.clear();
                  this.$store.commit('resetUser');
                  WxUtils.restartMiniProgram();
                } else if (Utils.getCurrentEnv() === 'h5') {
                  // H5
                  this.h5logout();
                }
              }
            });
          } else {
            Dialog.alert({
              title: '提示',
              content: res.data.msg,
              confirmText: '确定'
            });
          }
        })
        .catch(reason => {
          localStorage.clear();
          sessionStorage.clear();
          this.$store.commit('resetUser');
        });
    },
    weixinLogout() {
      localStorage.clear();
      sessionStorage.clear();
      this.$store.commit('resetUser');
      if (window.wx) {
        window.wx.closeWindow();
      }
      setTimeout(() => {
        this.$router.push({
          name: 'result'
        });
      }, 1000);
    },
    h5logout() {
      let q = {};
      if (this.getOpenId) {
        q.oid = this.getOpenId;
      }
      if (this.getUnionId) {
        q.uid = this.getUnionId;
      }
      this.$router.push({
        name: 'Login',
        query: q
      });
      localStorage.clear();
      sessionStorage.clear();
      this.$store.commit('resetUser');
    }
  },
  computed: {
    ...mapGetters(['getOpenId', 'getToken', 'getUnionId'])
  }
};
</script>

<style lang="stylus">
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#options {
  height: 100vh;
  background-color: color-primary-background;
}

.md-field-item .md-field-item-label.solid {
  width: auto;
}

.account {
  padding-top: 18px;
}

.urgent {
  margin-top: 20px;
}

.options_name {
  margin-top: 20px;
}

.outlogin {
  height: 88px;
  line-height: 88px;
  color: color-text-highlight;
  text-align: center;
  font-size: 36px;
  background-color: color-bg-base;
  margin-top: 20px;
}

.quicon {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #EB0404;
  position: absolute;
  top: 30px;
  left: 125px;
}

.quiconimg {
  font-size: 30px;
  color: #999;
}

.quiconimg img {
  width: 16px;
  height: 20px;
  margin-left: 5px;
}
</style>
